<template>
  <el-dialog
    :append-to-body="true"
    title="提示"
    :visible.sync="dialogVisible"
    width="400px"
    :close-on-click-modal="closeOnClick"
  >
    <div style="margin:20px 0;text-align:center">
      <div v-html="hint" />
    </div>
  </el-dialog>
</template>

<script>
export default {
    name: 'DoingDialog',
    components: {

    },
    props: {

    },
    data() {
        return {
            hint: '',
            closeOnClick: true,
            message: '正在处理中，请稍候...',
            closeOnClickModal: true,
            dialogVisible: false
        }
    },
    computed: {

    },
    watch: {

    },
    created() {
        this.$bus.on('showDoingDialog', this.showDoingDialog)
        this.$bus.on('closeDoingDialog', this.closeDoingDialog)
    },
    beforeDestroy() {
        this.$bus.off('showDoingDialog', this.showDoingDialog)
        this.$bus.off('closeDoingDialog', this.closeDoingDialog)
    },
    mounted() {

    },
    methods: {
        showDoingDialog(message, closeOnClick) {
            this.hint = message || this.message
            if (closeOnClick !== undefined) {
                this.closeOnClick = closeOnClick
            } else {
                this.closeOnClick = this.closeOnClickModal
            }

            this.dialogVisible = true
        },
        closeDoingDialog() {
            this.dialogVisible = false
        }
    }
}
</script>

<style scoped lang="scss">
/deep/ .el-dialog__headerbtn{
    top: 18px;
}
</style>
